import Vue from 'vue'
import Component from 'vue-class-component'
import {Indicator} from 'mint-ui'
import './topicStyle.css'
import {Toast} from 'mint-ui'
import {readFile, uploadImages} from '@/utils/uploadImage/index'
import Platform from '@/supports/platform'

@Component
export default class EditTopic extends Vue {
  topicProducts = []
  topicProductsArr = []
  topicId = ''
  isinDate = ''
  decArr = []

  created() {
    this.wrapperWidth = document.documentElement.clientWidth
    this.wrapperHeight = document.documentElement.clientHeight - 64
  }

  activated() {
    this.topicId = this.$route.params.id
    this.isinDate = this.$store.state.topic.isinDate
    eventBus.$on('EditTopic', this.handleLoadImages)
    if (this.topicId != 0 && (this.isinDate != 0 || this.isinDate === '')) {
      this.getData(this.topicId)
    } else {
      this.topicProducts = this.$store.getters.topicProductArr
      this.initProduct()
    }
  }

  initProduct() {
    for (let i = 0; i < this.topicProducts.length; i++) {
      let product = {}
      let storeProducts = this.topicProducts[i]
      product['productCover'] = storeProducts.productCover
      product['productId'] = storeProducts.productId
      product['productSourceType'] = 2
      product['title'] = storeProducts.title ? storeProducts.title : storeProducts.designerName
      product['subTitle'] = storeProducts.subTitle ? storeProducts.subTitle : storeProducts.productName
      product['thirdTitle'] = storeProducts.thirdTitle ? storeProducts.thirdTitle : (storeProducts.currencyLogo + '' + storeProducts.showPrice)
            // product["title"] = storeProducts.designerName
            // product["subTitle"] = storeProducts.productName
            // product["thirdTitle"] = storeProducts.currencyLogo + '' + storeProducts.showPrice
      this.topicProductsArr.push(product)
    }
  }

  async getData(topicId) {
    try {
      const response = await this.$axios.post(('/topic/v1/topic/' + topicId), {})

      if (response.status === 0) {
        this.isinDate = false
        let tInfo = response.data
        this.topicProducts = response.data.topicProducts
        for (let i = 0; i < this.topicProducts.length; i++) {
          let product = {}
          let storeProducts = this.topicProducts[i]
          product['productCover'] = storeProducts.productCover
          product['productId'] = storeProducts.productId
          product['productSourceType'] = 2
          product['title'] = storeProducts.title
          product['subTitle'] = storeProducts.subTitle
          product['thirdTitle'] = storeProducts.thirdTitle
          this.topicProductsArr.push(product)
        }

        let desc = tInfo.description ? tInfo.description : []
        let dec = desc.join('\n')
        this.$store.commit('topicDec', dec)
        this.$store.commit('topicTitle', tInfo.title)
        this.$store.commit('bgImg', tInfo.cover)
        this.$store.commit('setTopicProductArr', this.topicProductsArr)
        this.$store.commit('isinDate', 0)
      }
    } catch (e) {
      console.log(e)
    }
  }

  get topicTitle() {
    return this.$store.state.topic.topicTitle
  }

  get topicDec() {
    return this.$store.state.topic.topicDec
  }

  get bgImg() {
    return this.$store.state.topic.bgImg
  }

  handleFiles(e) {
    Platform.choosePhotos('1', 'EditTopic')
  }

  handleLoadImages(images) {
    let fileBgImg = images[0] ? images[0] : ''
    this.$store.commit('bgImg', fileBgImg)
  }

  mounted() {

  }

  get caculateHeight() {
    return String(this.wrapperHeight)
  }

  get caculateWidth() {
    return String(this.wrapperWidth)
  }

  handerProduct() {
    this.$router.push({name: 'addTopicProduct'})
  }

  async submitDate() {
    let descs = this.topicDec.split(/[\n]/g)
    let params = {
      cover: this.bgImg,
      topicId: this.topicId,
      description: descs,
      title: this.topicTitle,
      topicProducts: this.topicProductsArr
    }
    try {
      const response = await this.$axios.post('/topic/v1/topic/modify', params)

      if (response.status === 0) {
        Toast('修改成功！')
        let self = this
        setTimeout(function() {
          self.handlerPop()
        }, 1000)
      }
    } catch (e) {
      console.log(e)
    }
  }

  handlerPop() {
    this.$store.commit('clearTopicProductArr')
    this.$store.commit('clearData')
    this.$router.push({name: 'topic'})
  }

  render() {
    return (
            <div class="content">
                <mt-header class="header" fixed title="编辑专题">
                    <mt-button slot="right" onClick={this.submitDate}>
                        <icon name='saveIcon' scale='2'/>
                    </mt-button>
                    <mt-button onClick={this.handlerPop} icon="back" slot='left'></mt-button>
                </mt-header>

                <div class="addTopicBox" style={'height:' + this.caculateHeight + 'px'}>
                    <div class="canvasBtn">
                        <mt-button type="default" size="small" onClick={this.handleFiles}>
                            选择封面
                        </mt-button>
                        <mt-button type="default" size="small" onClick={this.handerProduct}>选择商品</mt-button>
                    </div>

                    <div id="fileList" class="topicAddImage">
                        <div v-show={this.bgImg && this.bgImg.length > 0}>
                            <img src={this.bgImg}/>
                        </div>
                        <div class="addImgTip" v-show={!this.bgImg}>
                          <icon name='addImageIcon' scale='4'/><br/>
                          <p>请选择封面图片</p></div>
                    </div>

                    <div class="canvasDec">
                        <mt-field label="标题" placeholder="请输入标题" value={this.topicTitle} onInput={(value) => {
                          this.$store.commit('topicTitle', value)
                        }}></mt-field>
                        <mt-field label="描述" placeholder="请输入描述" value={this.topicDec} onInput={(value) => {
                          this.$store.commit('topicDec', value)
                        }} type="textarea" rows="4"></mt-field>
                    </div>
                </div>
            </div>
    )
  }
}
